<template>
  <div class="container">
    <div class="menu">
      <div class="menu_left">
        <div class="dy box">
          <img src="../../../public/images/Home/Slide/动态.jfif" alt="" />
        </div>
        <div class="hot box">
          <img src="../../../public/images/Home/Slide/热门.jfif" alt="" />
        </div>
        <div class="channel box">
          <img src="../../../public/images/Home/Slide/频道.jpg" alt="" />
        </div>
      </div>
      <div class="menu_main">
        <ul>
          <li>番剧</li>
          <li>国创</li>
          <li>综艺</li>
          <li>动画</li>
          <li>鬼畜</li>
          <li>舞蹈</li>
          <li>娱乐</li>
          <li>科技</li>
          <li>美食</li>
          <li>电影</li>
          <li>电视剧</li>
          <li>纪录片</li>
          <li>游戏</li>
          <li>音乐</li>
          <li>影视</li>
          <li>知识</li>
          <li>咨询</li>
          <li>生活</li>
          <li>汽车</li>
          <li>新闻</li>
        </ul>
      </div>
      <div class="menu_right">
        <ul>
          <li>
            <el-icon size="16px"><PictureRounded /></el-icon> 专栏
          </li>
          <li>
            <el-icon size="16px"><Coordinate /></el-icon>活动
          </li>
          <li>
            <el-icon size="16px"><Guide /></el-icon>社区中心
          </li>
          <li>
            <el-icon size="16px"><VideoCameraFilled /></el-icon>直播
          </li>
          <li>
            <el-icon size="16px"><DataAnalysis /></el-icon>课堂
          </li>
          <li>
            <el-icon size="16px"><Headset /></el-icon>新歌热板
          </li>
        </ul>
      </div>
    </div>

    <div class="banner">
      <div class="banner_box">
        <ul @mouseover="stopAuto" @mouseout="startAuto">
          <li>
            <img src="../../../public/images/Home/Slide/001.webp" alt="" />
          </li>
          <li>
            <img src="../../../public/images/Home/Slide/003.webp" alt="" />
          </li>
          <li>
            <img src="../../../public/images/Home/Slide/002.webp" alt="" />
          </li>
          <li>
            <img src="../../../public/images/Home/Slide/004.webp" alt="" />
          </li>
          <li>
            <img src="../../../public/images/Home/Slide/005.webp" alt="" />
          </li>
          <li>
            <img src="../../../public/images/Home/Slide/006.webp" alt="" />
          </li>
          <li>
            <img src="../../../public/images/Home/Slide/007.webp" alt="" />
          </li>
          <li>
            <img src="../../../public/images/Home/Slide/008.webp" alt="" />
          </li>
          <li>
            <img src="../../../public/images/Home/Slide/001.webp" alt="" />
          </li>
        </ul>
      </div>
      <div class="smallMenu">
        <div
          class="smallMenuItem"
          v-for="(item, index) in smallMenuItemContent.slice(0, 8)"
          :key="index"
        >
          <img :src="item.link" alt="" />
          <div class="title_box">
            <p>{{ item.title }}</p>
            <p class="title_up">{{ item.title_up }}</p>
          </div>
        </div>
        <div>
          <p class="change" @click="chagne">换一换</p>
          <img
            :class="{ changeImageBack: ActiveChangeImageBack }"
            class="changeImage"
            src="../../../public/images/Home/Slide/换一换.png"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: 0,
      srcTimeRandom: 10,
      smallMenuItemContent: [
        {
          title: "漫威宣布：“钢铁侠”小罗伯特·唐尼将回归！并出演《复联6》！",
          title_up: "美漫放毒社",
          link: "",
        },
        {
          title: "到底哪个老六拿铁丝网修的陷阱啊！！",
          title_up: "王站长WzGz",
          link: "",
        },
        {
          title:
            "2023最新黑帮复仇爽片，重装悍匪以暴制暴，雷霆复仇血洗黑白两道！《黑帮之境2》",
          title_up: "犯叔说影",
          link: "",
        },
        {
          title: "这玩意儿凭什么能火60年？！",
          title_up: "大碗拿铁",
          link: "",
        },
        {
          title: "去渔排捕捞大黄鱼，在海上现捞现烤，小表妹说太好吃了",
          title_up: "小文哥吃吃吃",
          link: "",
        },
        {
          title:
            "60分钟看完，五部经典现代战争影片，全程惊险刺激！看得让人直呼过瘾！",
          title_up: "时光琉影",
          link: "",
        },

        {
          title:
            "中国提出高超音速战斗机的空战理论，设计思想可能和美国根本不同！",
          title_up: "刘晓非观察室",
          link: "",
        },
        {
          title: "专门成立警察抓女人露头发？为什么伊朗坚持保守？",
          title_up: "大碗拿铁",
          link: "",
        },
        {
          title: "中国小伙怒烧靖国神社，日本进行全球通缉，中韩两国联手护送回国",
          title_up: "殿堂历史",
          link: "",
        },
        {
          title: "2023四部高燃动作新片推荐 陷落哥 追杀哥 玩命哥 光头哥 都来了",
          title_up: "火线猫猫头",
          link: "",
        },

        {
          title: "偷 袈 裟 都 没 这 么 紧 张",
          title_up: "知了解压萌物",
          link: "",
        },
        {
          title:
            "把“人”变成“兽”只要3个字，日本“武士道”究竟是什么玩意？【日本武士怪谈07】",
          title_up: "冷兵器研究所",
          link: "",
        },
        {
          title:
            "steam已停售四年的大型丧尸游戏 世界第一单通玩家AWM无伤单通最高难度剧情没有避难所最高难度",
          title_up: "灾变杰克",
          link: "",
        },
        {
          title: "日本拉面大赛第一名的厨师煮的豚骨拉面，味道浓郁醇香，值得一吃",
          title_up: "大海美食家",
          link: "",
        },
        {
          title: "听说耿叔最近在国际服杀疯了！",
          title_up: "荒草音乐",
          link: "",
        },
        {
          title: "全民吃草，是怎么把一个国家吃废的？",
          title_up: "乌鸦校尉CaptainWuya",
          link: "",
        },
        {
          title: "《森林之子》和畜生队友们的欢乐生活",
          title_up: "-纯黑-",
          link: "",
        },
        {
          title: "【中字】吉伦哈尔主演！盖·里奇战争大片《契约》首曝预告",
          title_up: "鹦鹉螺预告片",
          link: "",
        },
      ],
      ActiveChangeImageBack: false,
    };
  },
  mounted() {
    this.smallMenuItemContent.forEach((item) => {
      this.srcTimeRandom = parseInt(Math.random() * 12 + 10);
      item.link = `../../../public/images/Home/Slide/0${this.srcTimeRandom}.webp`;
    });
  },
  created() {
    this.autoSwitch = setInterval(() => {
      this.imgeMove();
    }, 2500);
  },

  methods: {
    imgeMove() {
      const bannerImage = document
        .getElementsByClassName("banner")[0]
        .getElementsByClassName("banner_box")[0]
        .getElementsByTagName("ul")[0];
      this.time++;
      bannerImage.style.right = 600 * this.time + "px";
      bannerImage.style.transition = "0.5s ease";

      if (this.time == 8) {
        this.time = 0;
        setTimeout(() => {
          bannerImage.style.right = 0;
          bannerImage.style.transition = "none";
        }, 500);
      }
    },
    startAuto() {
      this.autoSwitch = setInterval(() => {
        this.imgeMove();
      }, 2500);
    },
    stopAuto() {
      clearInterval(this.autoSwitch);
    },
    chagne() {
      this.smallMenuItemContent.forEach((item) => {
        this.srcTimeRandom = parseInt(Math.random() * 12 + 10);
        item.link = `../../../public/images/Home/Slide/0${this.srcTimeRandom}.webp`;
      });
      this.ActiveChangeImageBack = true;
      setTimeout(() => {
        this.ActiveChangeImageBack = false;
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  .menu {
    height: 12vh;
    width: 100%;
    .menu_left {
      width: 20%;
      height: 100%;
      float: left;
      .box {
        width: 60px;
        height: 60px;
        float: right;
        margin: 1rem;
        border-radius: 50%;
      }
      .dy {
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        &::after {
          content: "动态";
          position: relative;
          left: 14px;
        }
      }
      .hot {
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        &::after {
          content: "热门";
          position: relative;
          left: 14px;
        }
      }
      .channel {
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        &::after {
          content: "频道";
          position: relative;
          left: 14px;
        }
      }
    }
    .menu_main {
      width: 60%;
      height: 100%;
      float: left;
      ul {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        li {
          width: 75px;
          height: 38px;
          border-radius: 5px;
          font-size: 0.8rem;
          text-align: center;
          line-height: 38px;
          background-color: rgba(230, 230, 230, 0.623);
          margin: 0.5rem 1rem;
          cursor: pointer;
          &:hover {
            background-color: rgba(219, 219, 219, 0.664);
          }
        }
      }
    }
    .menu_right {
      float: right;
      width: 20%;
      height: 100%;
      ul {
        display: flex;
        flex-wrap: wrap;
        width: 90%;
        justify-content: center;
        margin: 0.8rem -2rem;
        li {
          width: 72px;
          height: 35px;
          font-size: 0.8rem;
          text-align: center;
          line-height: 38px;
          margin: 0.2rem 0.5rem;
          cursor: pointer;
          &:hover {
            color: rgb(65, 65, 247);
          }
        }
      }
    }
  }
  .banner {
    height: 100%;
    width: 100%;
    padding: 2rem 0;
    .banner_box {
      transform: translateZ(0);
      margin-left: 8rem;
      height: 460px;
      width: 600px;
      border-radius: 10px;
      position: relative;
      float: left;
      overflow: hidden;
      ul {
        width: 5400px;
        height: 100%;
        position: relative;
        transition: 0.5s ease;
        right: 0;

        li {
          float: left;
          width: 600px;
          height: 60vh;
          img {
            height: 460px;
            width: 600px;
          }
        }
      }
    }
    .smallMenu {
      width: 1000px;
      height: 500px;
      float: right;
      margin-right: 9rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      div {
        .change {
          content: "换一换";
          width: 25px;
          height: 60px;
          text-align: center;
          font-size: 0.8rem;
          border: 1px solid rgb(224, 224, 224);
          position: absolute;
          border-radius: 5px;
          right: 6rem;
          top: 20rem;
          padding: 0.2rem;
          cursor: pointer;
          background-color: white;
        }
        .changeImage {
          background-size: cover;
          width: 50px;
          height: 60px;
          display: block;
          position: absolute;
          right: 5.6rem;
          top: 24.2rem;
          transition: height 0.5s;
        }
        .changeImageBack {
          height: 90px;
          transition: height 0.5s;
        }
      }

      .smallMenuItem {
        width: 220px;
        height: 150px;
        border-radius: 6px;
        margin-top: 5px;
        img {
          width: 100%;
          height: 100%;
        }
        .title_box {
          height: 60px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        p {
          padding-top: 5px;
          font-size: 0.8rem;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .title_up {
          color: gray;
        }
      }
    }
  }
}
</style>
